<template>
    <div class="app-container">
        <levelbar></levelbar>
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="模块点击量" name="hits">
                <div v-if="activeName == 'hits'">
                    <modules-hits ref="hitsTab"></modules-hits>
                </div>
            </el-tab-pane>
            <el-tab-pane label="模块分时活跃" name="time">
                <div v-if="activeName == 'time'">
                    <modules-time ref="timeTab"></modules-time>
                </div>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
import Levelbar from '../../layout/Levelbar';
import modulesHits from './comps/modulesHits';
import modulesTime from './comps/modulesTime';
export default {
    name: 'activeModules',
    components: { Levelbar, modulesHits, modulesTime },
    data() {
        return {
            activeName: 'hits'
        };
    },
    computed: {},
    methods: {
        handleClick(tab, event) {
            this.activeName = tab.name;
        }
    }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.app-container {
  position: relative;
  padding: 20px 20px 10px;
  width: 1400px;
  margin: 0 auto;
}
</style>
